<template>
  <div id="outerupload">
    <el-steps :active=1 simple style="margin-bottom: 20px">
      <el-step title="简介" icon="el-icon-info"></el-step>
      <el-step title="上传" icon="el-icon-upload2"></el-step>
      <el-step title="调整" icon="el-icon-setting"></el-step>
      <el-step title="结果" icon="el-icon-finished"></el-step>
    </el-steps>
    <el-row>
      <el-col :span="2">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="10">
        上传参考模型
        <el-upload
          class="upload-demo"
          drag
          :limit="1"
          :before-upload="beforeReference"
          action="http://localhost:8080/out/uploadreference">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传csv文件，且不超过5m</div>
        </el-upload>
      </el-col>
      <el-col :span="1" v-show="isReferenceUploaded">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="11" v-show="isReferenceUploaded">
        上传结果数据集
        <el-upload
          class="upload-demo"
          drag
          :limit="1"
          :before-upload="beforeResult"
          action="http://localhost:8080/out/uploadresult">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传csv文件，且不超过5m</div>
        </el-upload>
      </el-col>
    </el-row>
    <br>
    <br>
    <div style="text-align: center" v-show="isResultUpload">
      <el-button type="info" @click="next">数据预处理、设置参数！</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "OuterUpload",
  data() {
    return {
      isReferenceUploaded: false,
      isResultUpload: false
    }
  },
  methods: {
    beforeReference(file) {
      const isCSV = file.type == 'text/csv';
      if (!isCSV) {
        this.$notify({
          title: '必须选择csv文件',
          message: "文件类型不支持",
          type: "error"
        })
      }
      if (file.size > 5242880) {
        this.$notify({
          title: '文件过大',
          message: "限制小于5m",
          type: "error"
        })
        return false;
      }
      if (isCSV) {
        this.isReferenceUploaded = true
      }
      return isCSV;
    },
    beforeResult(file) {
      const isCSV = file.type == 'text/csv';
      if (!isCSV) {
        this.$notify({
          title: '必须选择csv文件',
          message: "文件类型不支持",
          type: "error"
        })
      }
      if (file.size > 5242880) {
        this.$notify({
          title: '文件过大',
          message: "限制小于5m",
          type: "error"
        })
        return false;
      }
      if (isCSV) {
        this.isResultUpload = true
      }
      return isCSV;
    },
    next() {
      location.replace("#/outer/choose")
    }
  }
}
</script>

<style scoped>
.el-divider--vertical {
  display: inline-block;
  height: 100%;
  vertical-align: center;
  position: relative;
}
</style>
